<template>
  <CommonQueryLayout class>
    <TableTopControl
      title-text="素材/标签分类管理"
      v-model:table-size="tableStateWrapper.tableSize"
      v-model:table-columns="tableStateWrapper.tableColumns"
      :loading="fetchClassifyLoading"
      @reload-data="getClassifyList"
    >
      <a-button type="primary" @click="openAddAtlasCDia()"
        >新增素材/标签分类</a-button
      >
    </TableTopControl>
    <a-table
      bordered
      :size="tableStateWrapper.tableSize"
      :columns="tableStateWrapper.tableColumns"
      :dataSource="tableStateWrapper.tableData"
      :loading="fetchClassifyLoading"
      :pagination="false"
      :expandedRowKeys="expendKeys"
      @expanded-rows-change="expandedRowKeysChange"
      childrenColumnName="childCateGoryList"
      rowKey="id"
    >
      <template #filterIcon="filtered">
        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
      </template>
      <template
        #filterDropdown="{
          setSelectedKeys,
          selectedKeys,
          column,
          confirm,
          clearFilters,
        }"
      >
        <div style="padding: 8px">
          <a-input
            ref="searchInput"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="
              (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
            "
            @pressEnter="handleSearch(selectedKeys, confirm)"
          />
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm)"
          >
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
          <a-button
            size="small"
            style="width: 90px"
            @click="handleReset(clearFilters)"
          >
            重置
          </a-button>
        </div>
      </template>
      <template #options="{ record }">
        <a-space>
          <a-button
            type="primary"
            size="small"
            @click="openEditAtlasCDia(record)"
          >
            编辑
          </a-button>
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="openAddAtlasCDia(record.parentId)">
                  同级分类
                </a-menu-item>
                <a-menu-item @click="openAddAtlasCDia(record.id)">
                  下级分类
                </a-menu-item>
              </a-menu>
            </template>
            <a-button type="primary" size="small">
              新增
              <DownOutlined />
            </a-button>
          </a-dropdown>
          <a-popconfirm title="确定删除此分类？" @confirm="delClassify(record)">
            <a-button
              type="primary"
              danger
              size="small"
              :loading="deleteClassifyLoading"
            >
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </CommonQueryLayout>
  <AddAtlasCDialog
    :data-wrapper="addAtlasCDialogState"
    @enter="enterAddAtlasC"
    :confirm-loading="addClassifyLoading"
  />
  <EditAtlasCDialog
    :data-wrapper="editAtlasCDialogState"
    @enter="enterEditAtlasC"
    :confirm-loading="editClassifyLoading"
  />
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import useSearchClassify from './hooks/useSearchClassify'
import useAddAtlasCDialog from './hooks/useAddAtlasCDialog'
import useEditAtlasCDialog from './hooks/useEditAtlasCDialog'

import CommonQueryLayout from '@/layout/CommonQueryLayout.vue'
import { TableTopControl } from '@/components/TopControl'
import AddAtlasCDialog from './components/AddAtlasCDialog.vue'
import EditAtlasCDialog from './components/EditAtlasCDialog.vue'
import { ClassifyItem } from '@/api/premium/category/model/classifyModel'
import { ClassifyApi, deleteClassify } from '@/api/premium/category/classify'
import { message } from 'ant-design-vue'
import { useStore } from '@/store'

const store = useStore()

const {
  tableStateWrapper,
  getClassifyList,
  fetchClassifyLoading,
  handleSearch,
  handleReset,
  searchInput,
  expendKeys,
  expandedRowKeysChange,
} = useSearchClassify()

const {
  addAtlasCDialogState,
  openAddAtlasCDia,
  enterAddAtlasC,
  addClassifyLoading,
} = useAddAtlasCDialog(getClassifyList)

const {
  editAtlasCDialogState,
  openEditAtlasCDia,
  enterEditAtlasC,
  editClassifyLoading,
} = useEditAtlasCDialog(getClassifyList)

const delClassify = async (classifyItem: ClassifyItem) => {
  await deleteClassify(classifyItem.id)
  message.success('删除成功！')
  await getClassifyList()
}
const deleteClassifyLoading = computed(() =>
  store.getters['global/isOpLoading'](ClassifyApi.DELETE_CLASSIFY)
)

onMounted(async () => {
  await getClassifyList()
})
</script>

<style lang="scss" scoped>
// @include b() {
// }
</style>
